<template>
    <div>
        <div class="recommend-title">
            周末去哪
        </div>
        <ul>
            <li v-for="itme of list" :key="itme.id" class="item border-bottom">
                <div class="item-img-wrapper">
                  <img class="item-img" :src="itme.imgUrl" alt="">
                </div>
                <div class="item-info">
                  <p class="item-title">{{itme.title}}</p>
                  <p class="itme-desc">{{itme.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
    @import '~styles/mixins.styl';
    .recommend-title
      line-height .8rem
      background #ccc
      text-indent .2rem
      color #333
    .item-img-wrapper
      overflow hidden
      height 0
      padding-bottom 37.9%
      .item-img
        width 100%
    .item-info
      padding .1rem
      .item-title
        line-height .54rem
        font-size .32rem
        ellipsis ()
      .itme-desc
        line-height .4rem
        color #ccc
        ellipsis ()
</style>
